import { cn } from "@/common/cn";

export type MenuItem = {
  label: React.ReactNode;
  title?: boolean;
  key: string;
  disabled?: boolean;
  active?: boolean;
  sub?: MenuItem[];
};

export type MenuDirection = "horizontal" | "vertical";

export type MenuProps = {
  data: MenuItem[];
  className?: string;
  direction?: MenuDirection;
  size?: Size;
};

const DIRECTION = {
  horizontal: "menu-horizontal",
  vertical: "menu-vertical",
};

const SIZE = {
  xs: "menu-xs",
  sm: "menu-sm",
  md: "menu-md",
  lg: "menu-lg",
  xl: "menu-xl",
};

export default function Menu({ data, className, direction, size }: MenuProps) {
  return (
    <ul
      className={cn(
        "menu bg-base-200 rounded-box",
        size && SIZE[size],
        direction && DIRECTION[direction],
        className,
      )}
    >
      {data.map((it) => (
        <li key={it.key} className={cn(it.title && "menu-title", it.disabled && "menu-disabled")}>
          <span className={cn(it.active && "menu-active")}>{it.label}</span>
          {it.sub && it.sub.length > 0 && <Sub data={it.sub} />}
        </li>
      ))}
    </ul>
  );
}

function Sub({ data }: { data: MenuItem[] }) {
  return (
    <ul>
      {data.map((it) => (
        <li key={it.key} className={cn(it.title && "menu-title", it.disabled && "menu-disabled")}>
          <span className={cn(it.active && "menu-active")}>{it.label}</span>
          {it.sub && it.sub.length > 0 && <Sub data={it.sub} />}
        </li>
      ))}
    </ul>
  );
}
